/*
 * @Author: SakumyZ
 * @Date: 2019-04-29 22:39:07
 * @Description:  设备详情页
 * @Last Modified by: SakumyZ
 * @Last Modified time: 2019-05-01 00:11:17
 */

import React from 'react';
import { Card } from 'antd';
import Navbar from '@/components/Navbar';
import CheatContainer from '@/components/CheatContainer';
import Echarts from 'echarts';
import Axios from 'axios';

import { Layout } from 'antd';
const { Content, Footer } = Layout;

import 'antd/dist/antd.css';
import '@/css/index.css';

// AJAX请求数据存放变量
let lightData = [];
let temperatureData = [];
let humidityData = [];
let smokeData = [];
let uploadTime = [];

// 折线图配置
// 光照折线图
const lightOption = {
  title: {
    text: '光照图',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#F79F1F'
      }
    }
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: uploadTime
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '光照',
      type: 'line',
      stack: '总量',
      lineStyle: {
        color: '#F79F1F'
      },
      areaStyle: {
        color: '#F79F1F'
      },
      label: {
        normal: {
          show: true,
          position: 'top'
        }
      },
      shadowStyle: { normal: {} },
      data: lightData
    }
  ]
};

// 温度折线图
const temperatureOption = {
  title: {
    text: '温度图',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#EA2027'
      }
    }
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: uploadTime
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '温度',
      type: 'line',
      stack: '总量',
      lineStyle: {
        color: '#EA2027'
      },
      areaStyle: {
        color: '#EA2027'
      },
      label: {
        normal: {
          show: true,
          position: 'top'
        }
      },
      shadowStyle: { normal: {} },
      data: temperatureData
    }
  ]
};

// 湿度折线图
const humidityOption = {
  title: {
    text: '湿度图',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#12CBC4'
      }
    }
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: uploadTime
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '湿度',
      type: 'line',
      stack: '总量',
      lineStyle: {
        color: '#12CBC4'
      },
      areaStyle: {
        color: '#12CBC4'
      },
      label: {
        normal: {
          show: true,
          position: 'top'
        }
      },
      shadowStyle: { normal: {} },
      data: humidityData
    }
  ]
};

// 烟雾折线图
const smokeOption = {
  title: {
    text: '烟雾图',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#FDA7DF'
      }
    }
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: uploadTime
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '烟雾',
      type: 'line',
      stack: '总量',
      lineStyle: {
        color: '#FDA7DF'
      },
      areaStyle: {
        color: '#FDA7DF'
      },
      label: {
        normal: {
          show: true,
          position: 'top'
        }
      },
      shadowStyle: { normal: {} },
      data: smokeData
    }
  ]
};

// 组件样式表
const styleSheet = {
  chartContainer: {
    display: '-webkit-flex' /* Safari */,
    display: 'flex',
    justifyContent: 'space-around',
    flexWrap: 'wrap',
    padding: '0 50px'
  },
  card: {
    width: '600px',
    height: '400px',
    margin: '20px'
  },
  title: {
    textAlign: 'center',
    fontSize: '24px',
    padding: '100px 0 10px 0'
  }
};

class Details extends React.Component {
  constructor(props) {
    super(props);
    let index = this.getIndex();
    this.state = {
      index: index,
      machineData: []
    };
  }

  /**
   * @description 组件生命周期函数,负责获取ajax请求数据，并设置渲染Echart于页面上
   * @param null
   */
  componentDidMount() {
    this.getMachineData(() => {
      // Echart设置
      const lightChart = Echarts.init(document.getElementById('light-chart'));
      const temperatureChart = Echarts.init(
        document.getElementById('temperature-chart')
      );
      const humidityChart = Echarts.init(
        document.getElementById('humidity-chart')
      );
      const smokeChart = Echarts.init(document.getElementById('smoke-chart'));
      lightChart.setOption(lightOption);
      temperatureChart.setOption(temperatureOption);
      humidityChart.setOption(humidityOption);
      smokeChart.setOption(smokeOption);
    });
  }

  /**
   * @description 发送ajax-get请求到接口('http://sakumyz.xyz/api/machine-data/:index')
   *              并将接口中的数据保存在数组中，方便调用
   * @param function 参数是一个回调函数，用以在数据保存完毕后，再进行图标渲染，否则将先渲染图表得到空数据
   */
  getMachineData(callback) {
    Axios.get(`http://sakumyz.xyz/api/machine-data/${this.state.index}`)
      .then(res => {
        // 将ajax请求得到的全部数据遍历保存到各个数据的数组中
        const data = res.data;
        data.forEach(element => {
          lightData.push(element.light);
          temperatureData.push(element.temperature);
          humidityData.push(element.humidity);
          smokeData.push(element.smoke);
          uploadTime.push(element.uploadTime);
          console.log(uploadTime);
        });
      })
      .then(() => {
        callback();
      })
      .catch(err => {
        console.log(err);
      });
  }

  // 获取路由链接中末尾处的设备编号
  getIndex() {
    let path = this.props.history.location.pathname;
    let pathArray = path.split('/');
    let index = pathArray[pathArray.length - 1];
    return index;
  }

  render() {
    return (
      <div>
        <Navbar />

        <Layout>
          <Content>
            <CheatContainer>
              <h2 style={styleSheet.title}>设备{this.state.index}详情页</h2>
              <div style={styleSheet.chartContainer}>
                <Card style={styleSheet.card} id="light-chart" />
                <Card style={styleSheet.card} id="temperature-chart" />
                <Card style={styleSheet.card} id="humidity-chart" />
                <Card style={styleSheet.card} id="smoke-chart" />
              </div>
            </CheatContainer>

            <Footer style={{ textAlign: 'center' }}>
              Plateform ©2019 Created by SakumyZ
            </Footer>
          </Content>
        </Layout>
      </div>
    );
  }
}

export default Details;
